<template>
  <Module :cfg="moduleCfg" ref="slider">
    <el-carousel height="177px" :interval="3000" indicator-position="none" arrow="never" v-if="slideData.length>0">
      <el-carousel-item v-for="item in slideData" :key="item.id">
        <div class="item">
          <LineChart :data="item" :cfg="chartCfg"></LineChart>
          <div class="isNull" v-if="!item['cameraID']">能见度较好，无雾霾！</div>
<!--          <span class="name" @click="focusEvt(item)">{{item.name}}</span>-->
        </div>
      </el-carousel-item>
    </el-carousel>
  </Module>
</template>

<script>
  import Module from 'comp/common/Module';
  import LineChart from 'kkui/echarts/LineChart';

  export default {
    name: "VisibilityInfo",
    components: {
      Module,
      LineChart
    },
    props: ['data'],
    data() {
      return {
        moduleCfg: {
          icon: WebCfg.icons.visibility,
          title: `能见度监控采样`
        },
        chartCfg: {
          bottom: 20
        },
        name: '',
        slideData: [],
        slideTimer: null
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        this.$sysServer.ServerGetSmogData().then(data => {
          this.slideTimer && clearInterval(this.slideTimer);
          if (data.length === 1 && !data[0].name) {
            this.slideTimer = setInterval(() => {
              this.getData();
            }, 5000)
          } else {
            this.slideTimer = setInterval(() => {
              this.getData();
            }, 1000 * 3 * data.length);
          }
          this.slideData = data.map(item => {
            const _data={
              label: item.bizEventInfozbList.map(itm => itm.detectedTime),
              name: (item.groupName || '') + '    ' + (item.name || ''),
              cameraID: item.detectedId,
              data: item.detectedId ? item.bizEventInfozbList.map(itm => itm.distance) : [999999, 999999],
              pos: item.coordinate
            };

            if(data.length>1 && Math.ceil(Math.random()*10)%2===0){
              const newData=[];
              while (newData.length<_data.data.length){
                const num=Math.ceil(Math.random()*100);
                newData.push(800+(Math.ceil(Math.random()*10)%2===0?num:-num))
              }
              _data.data=newData;
            }

            return _data
          })
        })
      },

      focusEvt(item) {
        this.$parent.$refs.evtCountData.activeEvtCode = '';
        const map = this.$parent.$refs.map;
        map.hiddenEvtCode = '';

        const rst = Object.values(map.markers).filter(mark => {
          const camera = mark.data.preData.bscCamera;
          return camera && camera.id === item.cameraID
        });

        if (rst.length > 0) {
          map.focusGis(item.pos);
        } else {
          console.log('找不到匹配的事件');
        }
      }
    },
    computed: {
      nums: function () {
        const nums = [1000];
        while (nums[nums.length - 1] !== 50) {
          nums.push(nums[nums.length - 1] - 50)
        }
        return nums;
      },
      getChartData(check) {
        const newData = {
          name: [],
          label: [],
          value: []
        };

        let _data = [];
        if (WebCfg.mock) {
          if (this.data.length > 0 && this.data[0].id) {

          }
        } else {
          _data = this.data;
        }

        _data.forEach((item, index) => {
          newData.name.push(item.name);
          newData.value.push(item['bizEventInfozbList'].map(itm => Number(itm.distance)));
          if (index === 0) {
            newData.label = item['bizEventInfozbList'].map(itm => itm.detectedTime);
            this.name = item.name + '...';
          }
        });
        if (this.data.length === 0) this.name = '';
        return newData;
      }
    },
    beforeDestroy() {
      this.slideTimer && clearInterval(this.slideTimer);
      this.slideTimer = null;
    }
  }
</script>

<style scoped lang="scss">
  span.name {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    color: var(--font-green-color);
    top: -3px;
    left: 0;
    font-size: 12px;
    text-align: center;
    cursor: pointer;

  }

  .slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    ul {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      height: 100%;


      li {
        width: 328px;
        height: 100%;
        background-color: #e00;
        float: left;
      }
    }

  }


  .label {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    height: 30px;


    display: flex;
    justify-content: center;
    gap: 5px;

    li {
      cursor: pointer;
      font-size: 12px;
      color: var(--font-green-color);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      .circle {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

    }

    li:nth-child(1) .circle {
      background-color: #EE6666;
    }

    li:nth-child(2) .circle {
      background-color: #FAC858;
    }

    li:nth-child(3) .circle {
      background-color: #3BA272;
    }

    li:nth-child(4) .circle {
      background-color: #5470C6;
    }

    li:nth-child(5) .circle {
      background-color: #9A60B4;
    }

  }

  .isNull {
    position: absolute;
    top: 40%;
    left: 30px;
    right: 30px;
    height: 30px;
    width: 100%;
    line-height: 30px;
    font-size: 14px;
    color: var(--font-green-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    opacity: .6;
    text-align: center;
  }

  ul.mark {
    position: absolute;
    top: 25px;
    left: 10px;
    bottom: 10px;
    width: 50px;
    font-size: 10px;
    color: #666;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
  }
</style>

